;(function (window) {
  'use strict'
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#todoapp',
    data: {
      //   todoList: [
      //     { id: 1, todoName: '游泳', done: false },
      //     { id: 2, todoName: '滑雪', done: true },
      //     { id: 3, todoName: '散步', done: false },
      //   ],
      todoList: JSON.parse(localStorage.getItem('todoList')),
      todoName: '',
      editId: 0,
    },
    methods: {
      add() {
        if (!this.todoName) return alert('添加的任务项不能为空')
        this.todoList.unshift({
          id: Date.now(),
          todoName: this.todoName,
          done: false,
        })
        this.todoName = ''
      },
      del(id) {
        // this.todoList = this.todoList.filter((todo) => todo.id !== id)
        this.todoList.splice(
          this.todoList.findIndex((item) => item.id === id),
          1
        )
      },
      edit(id) {
        this.editId = id
      },
      update() {
        this.editId = 0
      },
      clear() {
        this.todoList = this.todoList.filter((todo) => !todo.done)
      },
    },
    computed: {
      leftCount() {
        return this.todoList.filter((item) => !item.done).length
      },
      isShowClearCompleted() {
        return this.todoList.some((item) => item.done)
      },
      checkAll: {
        get() {
          return this.todoList.every((todo) => todo.done)
        },
        set(val) {
          this.todoList.forEach((todo) => (todo.done = val))
        },
      },
    },
    // watch: {
    //   todoList: {
    //     handler(value) {
    //       localStorage.setItem('todoList', JSON.stringify(value))
    //     },
    //     deep: true,
    //     // immediate: true, //只要一打开网页就要执行handler里面的代码
    //   },
    // },
  })
  vm.$watch('todoList', {
    deep: true,
    handler(value) {
      localStorage.setItem('todoList', JSON.stringify(value))
    },
  })
})(window)
